<!DOCTYPE html>
<html>

<head>
  <title>城乡报告防伪</title>
  <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  <style>
    body {
      font-family: 'Arial', sans-serif;
      padding: 20px;
      margin: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #f4f4f4;
    }

    h1 {
      text-align: center;
      font-size: 48px;
      /* 原来是24px */
      color: #333;
    }

    button {
      font-size: 36px;
      /* 原来是18px */
      padding: 20px 40px;
      /* 原来是10px 20px */
      color: white;
      background-color: #1aad19;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      margin-top: 40px;
      /* 原来是20px */
    }

    button:hover {
      background-color: #179b16;
    }

    @media (max-width: 600px) {
      h1 {
        font-size: 36px;
        /* 原来是18px，适配手机端 */
      }

      button {
        font-size: 32px;
        /* 原来是16px，适配手机端 */
        padding: 16px 32px;
        /* 原来是8px 16px */
      }
    }
  </style>
</head>

<body>
  <h1>扫码验证报告真伪</h1>
  <button id="scanQRCode">扫一扫</button>

  <script type="text/javascript">
    // 使用从Django视图传递的变量来配置wx.config
    let config = {
      debug: false, // 开启调试模式, 调用的所有api的返回值会在客户端alert出来
      appId: '{{ appId }}', // 必填，公众号的唯一标识
      timestamp: {{ timestamp }}, // 必填，生成签名的时间戳
    nonceStr: '{{ nonceStr }}', // 必填，生成签名的随机串
      signature: '{{ signature }}',// 必填，签名
        jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表
      }
    console.log(">>>>>>", config)
    wx.config(config);
    let scanQRCode = () => {
      wx.scanQRCode({
        needResult: 1,
        scanType: ["qrCode", "barCode"],
        success: function (res) {
          var result = res.resultStr;
          alert("123qwe" + result);
          if (result) {
            window.location.href = "https://fpizp0.aliwork.com/o/verify-report?report_code=" + result;
          }
        }
      });
    }
    wx.ready(function () {
      // 在这里调用 API
      document.getElementById('scanQRCode').onclick = scanQRCode;
      scanQRCode()
    });
    wx.error(function (res) {
      // 配置失败后的回调
      alert("微信JS-SDK配置失败: " + JSON.stringify(res));
    });
  </script>
</body>

</html>